<template>
    <swiper :slidesPerView="1.2" :spaceBetween="10" :autoplay="{
      delay: 2500,
      disableOnInteraction: false,
    }" :loop="true" :centeredSlides="true" :modules="modules" class="slider-show">
        <swiper-slide>
            <h3 class="text-2xl font-bold text-black mb-2">
                雲端遊戲
            </h3>
            <div class="relative">
                <img src="../assets/images/frame-1.webp" alt="雲端遊戲">
                <div class="px-6 py-9 absolute bottom-0 text-white text-left">
                    <h5>專為高資源遊戲量身打造CDN專案，確保順暢的遊戲性能，提升玩家的遊戲體驗。</h5>
                </div>
            </div>
        </swiper-slide>
        <swiper-slide>
            <h3 class="text-2xl font-bold text-black mb-2">
                雲端直播
            </h3>
            <div class="relative">
                <img src="../assets/images/frame-1.webp" alt="雲端遊戲">
                <div class="px-6 py-9 absolute bottom-0 text-white text-left">
                    <h5>以最最新CDN技術低延遲與最高影像品質提供不間斷的直播傳輸，實現真正即時的直播體驗。</h5>
                </div>
            </div>
        </swiper-slide>
        <swiper-slide>
            <h3 class="text-2xl font-bold text-black mb-2">
                雲端金融
            </h3>
            <div class="relative">
                <img src="../assets/images/frame-1.webp" alt="雲端遊戲">
                <div class="px-6 py-9 absolute bottom-0 text-white text-left">
                    <h5>客製化CDN專案為雲端金融提供高效與極致安全的數據傳輸，確保金融交易的穩定性與可靠性。</h5>
                </div>
            </div>
        </swiper-slide>
        <swiper-slide>
            <h3 class="text-2xl font-bold text-black mb-2">
                跨境電商
            </h3>
            <div class="relative">
                <img src="../assets/images/frame-1.webp" alt="雲端遊戲">
                <div class="px-6 py-9 absolute bottom-0 text-white text-left">
                    <h5>為電商提供全球化的內容傳遞與穩定的網絡體驗，實現網購的高效率與高滿意度。</h5>
                </div>
            </div>
        </swiper-slide>
    </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';

// import 'swiper/css/pagination';

// import '/style.css';

// import required modules
import { Autoplay } from 'swiper';

export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        modules: [Autoplay],
      };
    },
  };

</script>
<style>
/* .slider-show {
    width: 50%;
    overflow: visible;
} */
</style>
  